<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <!--此处cite属性链接到了端午节的介绍百科（信息源，起解释作用）-->
    <q cite="https://zh.wikipedia.org/wiki/%E7%AB%AF%E5%8D%88%E8%8A%82">端午节</q>是东亚文化圈的传统节日，定在每年农历五月初五，别称端阳节。
</p>
<div>
    html的blockquote元素说明：
    <blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">HTML &lt;blockquote&gt; 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 &lt;cite&gt;元素。</blockquote>
</div>
<!--<kbd>标签和<samp>标签的使用-->
<p>
    你需要按下<kbd>ctrl</kbd>+<kbd>A</kbd>才能全部选中文本内容。
</p>
<p>
    <!--系统的输出以提示用户输入-->
    你想继续下载这个文档吗？如若继续请输入<samp><kbd>yes</kbd></samp>，取消请输入<samp><kbd>no</kbd></samp>。
</p>
<p>
    <!--用户的输入->系统相应输出-->
    如果要设置文档字体的大小，请点击<kbd><samp>菜单</samp></kbd>中的<kbd><samp>设置（settings）</samp></kbd>按钮，则程序将跳转到字体设置界面。
</p>
<p>
    <!--自己嵌套的kbd标签表示实际的键盘/鼠标按键-->
    如果你想选中全部文本内容，请按住<kbd><kbd>Ctrl</kbd></kbd>+<kbd><kbd>A</kbd></kbd>，此时当前页面的所有文本内容将被选中。
</p>
<p>
    <!--samp标签表示计算机程序要输出的内容-->
    当你在浏览器控制台键入<code>console.log("hello world");</code>时，再按下<kbd>Enter键</kbd>，将会输出相应的<samp>hello world</samp>字样。
</p>

<p>
    <!--mark标签用于突出显示与上下文有关联的内容-->
    苹果，荔枝，龙眼都是长在树上的水果，但是<mark>西瓜</mark>却是长在地里的水果。
</p>

<p>
    <!--code标签用于表示一段程序代码-->
    console.log("hello world!");
    <code>console.log("hello world!");</code>
</p>
<!--dfn标签使用说明例子-->
<!--在段落中给出了术语internet的定义-->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>
<dl>
    <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
    <dt>
        <dfn>
            <abbr title="World-Wide Web">WWW</abbr>
        </dfn>
    </dt>
    <!--在dd标签中给出了术语www的定义-->
    <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>
<p>
    <!--abbr标签用于内容的缩写-->
    你完全可以使用<abbr title="HyperText Markup language">HTML</abbr>来写一个非常精彩的日记。
</p>
<!--注音系列标签-->
<p>
    <!--下面这种样式对大多数浏览器支持度良好-->
    <ruby>
        <rb>旧</rb>
        <rp>(</rp><rt>jiù</rt><rp>)</rp>
        <rb>金</rb>
        <rp>(</rp><rt>jīn</rt><rp>)</rp>
        <rb>山</rb>
        <rp>(</rp><rt>shān</rt><rp>)</rp>
    </ruby>
    <!--下面的形式对Firefox支持度最高，其他浏览器错乱显示-->
    <!--rtc标签仅适用于Firefox浏览器-->
    <ruby>
        <rb>旧</rb>
        <rb>金</rb>
        <rb>山</rb>
        <rt>jiù</rt>
        <rt>jīn</rt>
        <rt>shān</rt>
        <rtc>San Francisco</rtc>
    </ruby>
</p>
<div>
<!--链接元素：a标签-->
    <p>小明的个人介绍：</p>
    <ul>
        <li>
            <!--新窗口打开链接-->
            <a target="_blank" href="http://www.xiaoming.net">小明的个人网站</a>
        </li>
        <li>
            <!--回到当前页面的顶部 锚点 的特性-->
            <!--其中top也可替换为任何其他元素的id值，表示链接到该id指向的元素-->
            <a href="#top">回到顶部</a>
        </li>
        <li>
            <a href="mailto: xiaoming@xm.com">小明的电子邮件</a>
        </li>
        <li>
            <a href="tel: +8612345">小明的联系电话</a>
        </li>
        <li>
            <!--下载链接所指向的内容-->
            <a href="xiaoming.pdf" download="小明的简历.pdf">小明的简历下载</a>
        </li>
    </ul>
</div>
<div>
    <!--img标签的用法-->
    <img src="1367559789839.jpg" alt="玫瑰花" width="300" height="200" usemap="#primary"/>

    <map name="primary">
        <area shape="circle" coords="0, 0, 100" href="http://www.baidu.com" alt="百度"/>
        <area shape="rect" coords="0, 100, 100, 200" href="1367559789839.jpg" alt="玫瑰花"/>
    </map>
</div>
<!--figure标签和figcaption标签的使用-->
<div>
    <!--此处引用了一张图片-->
    <figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="A robotic monster over the letters MDN.">
        <figcaption>MDN Logo</figcaption>
    </figure>
    <!--此处引用了一段内容-->
    <figure>
        <figcaption>
            <cite>林徽因精选：</cite>
        </figcaption>
        <blockquote>
            记忆的梗上，
            谁不有两三朵娉婷，
            披着情绪的花
        </blockquote>
    </figure>
</div>
<!--列表系列标签-->
<div>
    <!--定义一个编号类型为大写字母，开始项为C的有序列表-->
    <ol type="A" start="C">
        <!--覆盖父元素的规则，将该列表项类型改为数字，并且距离数字首元为5，即编号为5，并且将之后的列表项距离首元的值改为从6开始-->
        <li type="1" value="25">first item</li>
        <li>second item</li>
        <li>
            <!--编号从后往前编-->
            <ol type="i" start="iii" reversed>
                <li>third item sub first</li>
                <li>third item sub second</li>
            </ol>
        </li>
        <li>last item</li>
        <li>
            <ul type="square">
                <li>first unordered list</li>
                <li>second unordered list</li>
            </ul>
        </li>
    </ol>
    <!--定义列表-->
    <dl>
        <!--单条术语，多条描述-->
        <dt>苹果</dt>
        <dd>是水果中的一种，是蔷薇科苹果亚科苹果属植物，其树为落叶乔木。</dd>
        <dd>是一种低热量食物，每100克产生60千卡热量。</dd>
    </dl>
    <!--一条术语，一条描述-->
    <dl>
        <dt>苹果</dt>
        <dd>是蔷薇科苹果亚科苹果属植物，其树为落叶乔木</dd>
    </dl>
    <!--多条术语，单条描述-->
    <dl>
        <dt>凤梨</dt>
        <dt>菠萝 </dt>
        <dt>黄梨</dt>
        <dd>
            茎短。叶多数，莲座式排列，剑形，长40-90厘米，
            宽4-7厘米，顶端渐尖，全缘或有锐齿，腹面绿色，背面粉绿色，边缘和顶端常带褐红色，生于花序顶部的叶变小，常呈红色。
        </dd>
    </dl>
    <!--多条术语，多条描述-->
    <dl>
        <dt>中文学名</dt>
        <dd>菠萝</dd>
        <dt>拉丁学名</dt>
        <dd>Ananas comosus Merr</dd>
        <dt>生活型</dt>
        <dd>多年生草本植物</dd>
        <dt>原产地</dt>
        <dd>美洲热带地区</dd>
    </dl>
    <!--当为元数据时，为了更好定义样式，使用div包裹每个键值对数据-->
    <dl>
        <div>
            <dt>中文学名</dt>
            <dd>菠萝</dd>
        </div>
        <div>
            <dt>拉丁学名</dt>
            <dd>Ananas comosus Merr</dd>
        </div>
        <div>
            <dt>生活型</dt>
            <dd>多年生草本植物</dd>
        </div>
        <div>
            <dt>原产地</dt>
            <dd>美洲热带地区</dd>
        </div>
    </dl>
</div>


</body>
</html>